<template>
  <view>
    <view class="bac">

      <image
        :src="userInfo.avatarUrl?userInfo.avatarUrl:'https://wx.qlogo.cn/mmhead/Q3auHgzwzM6KdibTKAZM4XIZSGGiaUPxVlVHgZYxo4icjO9ccicM7IGZ1Q/0'"
        mode=""></image>
      <p style="padding: 0 30rpx;" @click="login">{{userInfo.nickName?userInfo.nickName:'未登录'}}</p>
      <!-- 流星 -->

      <view class="star animation" style="left: -100px;
      top: -400px;"></view>
      <view class="star animation2" style="left: -60px;
      top: -200px;"></view>
      <view class="star animation3" style="left: 120px;
      top: -225px;"></view>
      <view class="star animation4" style="left: 175px;
      top: -255px;"></view>

    </view>
    <!-- <view class="number-ords-box">
      <view class="number-ords">
        <p>113</p>
        <view>
          <van-icon name="good-job" />
          <text>已掌握</text>
        </view>
      </view>
      <view class="number-ords">
        <p>113</p>
        <view>
          <van-icon name="checked" />
          <text> 已学</text>
        </view>
      </view>
      <view class="number-ords">
        <p>113</p>
        <view>
          <van-icon name="underway" />
          <text> 未学</text>
        </view>
      </view>
    </view> -->
    <view class="plate-box" @click="dove">
      <view class="plate">
        <span class="iconfont">&#xe60f;</span>
        <text>我的收藏</text>
        <uni-icons type="forward" size="18"></uni-icons>
      </view>
      <!-- <view class="plate">
        <span class="iconfont">&#xe606;</span>
        <text style="margin-left: 1px;">实验室</text>
        <uni-icons type="forward" size="18"></uni-icons>
      </view>
      <view class="plate">
        <span class="iconfont" style="font-size: 20px ">&#xe7bd;</span>
        <text>意见反馈</text>
        <uni-icons type="forward" size="18"></uni-icons>
      </view> -->
      <view class="plate">
        <span class="iconfont" style="font-size: 16px;">&#xe644;</span>
        <text>关于我们</text>
        <uni-icons type="forward" size="18"></uni-icons>

      </view>
    </view>

  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {

      };
    },
    computed: {
      // ...mapState('user', ['userInfo'])
      ...mapState({
        userInfo: (state) => {
          return state.user.userInfo
        }
      })
    },
    methods: {
      dove() {
        console.log(this.userInfo)
        uni.showModal({
          title: '鸽子',
          content: '尚未开发，躺平中',
          showCancel: false,
        });
      },
      login() {

        if (!this.userInfo.avatarUrl) {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }


      }
    }
  }
</script>

<style lang="scss">
  .bac {
    height: 450rpx;
    width: 100%;
    background: url("https://cdn.zhoukaiwen.com/zjx_me_bg6.jpg") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
    }

    p {
      color: white;
      font-weight: 700;
      font-size: 20px;
    }

    .star {
      height: 5rpx;
      width: 5rpx;
      background-color: #aaffff;
      border-radius: 50%;
      position: relative;
      left: -100px;
      top: -200px;
      box-shadow: 0 0 1px 1px white;

    }

    .star::after {
      content: "";
      position: absolute;
      left: 5.49px;
      top: -18px;
      border: 1px solid transparent;
      border-bottom: 20px solid;
      border-bottom-color: rgba(170, 255, 255, 0.7);
      transform: rotate(30deg);
    }

    .animation {
      animation: star-fall 12s 421s linear infinite;
    }

    .animation2 {
      animation: star-fall2 12s 85s linear infinite;
    }

    .animation3 {
      animation: star-fall3 12s 285s linear infinite;
    }

    .animation4 {
      animation: star-fall4 12s 170s linear infinite;
    }

    @keyframes star-fall {
      0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }

      25% {
        opacity: 1;
        transform: translate3d(-30px, 50px, 0);
      }


      50% {
        opacity: 0;
        transform: translate3d(-60px, 100px, 0);
      }

      100% {
        opacity: 0;
        transform: translate3d(-60px, 100px, 0);
      }
    }

    @keyframes star-fall2 {
      0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }

      20% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }

      45% {
        opacity: 1;
        transform: translate3d(-30px, 50px, 0);
      }


      70% {
        opacity: 0;
        transform: translate3d(-60px, 100px, 0);
      }

      100% {
        opacity: 0;
        transform: translate3d(-60px, 100px, 0);
      }
    }

    @keyframes star-fall3 {
      0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }

      50% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }

      70% {
        opacity: 1;
        transform: translate3d(-30px, 50px, 0);
      }


      90% {
        opacity: 0;
        transform: translate3d(-60px, 100px, 0);
      }

      100% {
        opacity: 0;
        transform: translate3d(-60px, 100px, 0);
      }
    }

    @keyframes star-fall4 {
      0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }

      10% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }

      50% {
        opacity: 1;
        transform: translate3d(-30px, 50px, 0);
      }


      90% {
        opacity: 0;
        transform: translate3d(-60px, 100px, 0);
      }

      100% {
        opacity: 0;
        transform: translate3d(-60px, 100px, 0);
      }
    }
  }

  .number-ords-box {
    width: 100%;
    height: 160rpx;
    background-color: white;
    display: flex;
    box-shadow: 0px 3px 5px 1px #e4e5e5;

    .number-ords {
      width: 33.33333%;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;

      text {
        color: #8799a3;
        font-size: 13px;
        vertical-align: 2px;
      }
    }

    .number-ords:nth-child(1)::after,
    .number-ords:nth-child(2)::after {
      position: absolute;
      content: "";
      display: block;
      width: 4rpx;
      height: 90rpx;
      right: 0;
      background-color: #f7f8fa;
    }

    .number-ords:nth-child(1) {
      font-size: 20px;
      font-weight: 700;
      color: #388f82;
    }

    .number-ords:nth-child(2) {
      font-size: 20px;
      font-weight: 700;
      color: #9bbddc;
    }

    .number-ords:nth-child(3) {
      font-size: 20px;
      font-weight: 700;
      color: #b65a5b;
    }
  }

  .plate-box {
    height: 200rpx;
    margin: 40rpx;
    border-radius: 4px;
    background-color: white;

    .plate {
      position: relative;
      padding: 25rpx 0;

      span {
        margin: 0 15rpx 0rpx 40rpx;
        font-size: 40rpx;
      }

      text {
        font-size: 32rpx;
      }

      uni-icons {
        float: right;
        margin-right: 15rpx;
      }
    }

    .plate::after {
      content: "";
      display: block;
      height: 1rpx;
      width: 90%;
      position: absolute;
      left: 50%;
      bottom: 0%;
      transform: translate(-50%, 0%);
      background-color: #f3f3f4;
    }

    .plate:last-child::after {
      background-color: transparent;
    }
  }
</style>
